<script type="text/javascript">
window.UMEDITOR_HOME_URL = "${request.contextPath}/assets/plugins/umeditor-v1.2.2/";
</script>
<style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
.up_progress1{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress1 .progress-bar1{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
.fileinput_a{display:inline-block; width:120px; height:120px;  position:relative; overflow:hidden;}
/* .fileinput_a:hover{background-image: url(assets/imgs/upload.png); } */
.fileinput_input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}

.span_size{/*字数限制  */display: block;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*换行  */display:block;word-break: break-all;word-wrap: break-word;}
.h7{height:70px;padding-left: 0px;padding-right: 0px;}
.pt10{height:60px;float:left;padding-left: 2px; padding-right: 0px;padding-top: 10px;}
.pt15{align:center;height:60px;float:left;padding-left: 0px; padding-right: 0px;padding-top: 15px}

body {font-family: Monospace;
	/* background-color: #000000; */
	margin: 0px;
	overflow-x: hidden;
}
.uploadDiv {
	background-color: #fff;
	position: absolute;
	width: 100%;
	height: 63px;
	overflow: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	cursor: pointer;
}
.Line_feed{
	/*换行  */
	  display:block;
	  word-break: break-all;
	  word-wrap: break-word;
	}
</style>
<!-- 主体内容 -->
<div class="main_fr_mic" style="margin-bottom:10px;">
	<i class="glyphicon glyphicon-home"></i>
	<a href="admin/index">首页</a><span>></span>
	<a  class="active">用户管理</a><span>></span>
	<a class="active">基本信息</a>
</div>

<div id="mainVueApp" style="background-color: #fff;">
	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this" @Click="switchBlackStatus(0)">正常用户</li>
		    <li @Click="switchBlackStatus(1)">设备借用黑名单</li>
		  </ul>
	 </div>
<div class="main_fr_down over">
	<div class="main_fr_search over mb10">
		  <form id="search_submit" class="form-inline">
			  <div class="good_top22">
				 <span class="good_top021">用户列表<template>（{{ page.total }}）</template></span>
				 <span class="good_top022">
				 	<input type="button" @click="update(0);" class="search_an01" value="新增用户">
				  </span>
			  </div>
			  <div class="main_fr_search_cx">
			  	<input value="${parameter.blackStatus}" name="blackList" type="hidden" id="blackStatus">
				用户账号  <input name="id" placeholder="" type="text" class="form-control" style="width:200px;"/>
				姓名  <input name="name" placeholder="" type="text" class="form-control" style="width:200px;"/>
			           账号状态
	             <select id="status" class="form-control" style="width:200px;" placeholder="请选择" name="status">
					<option value="" selected>请选择— —</option>
					<option v-for="(r, index) in statusText" :value="index">{{r}}</option>
	            </select>
              	<input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">	
			  </div>
		  </form>
		  <table class="table table-bordered table-hover">
			<thead  class="table_heaer">
				<tr class="text-center">
					<th>序号</th>
					<th>账号</th>
					<th>姓名</th>
					<th>专业</th>
					<th>邮箱</th>
					<th>电话</th>
					<th>角色</th>
					<th>用户组</th>
					<th>账号状态</th>
					<th>操作</th> 
					<th>照片</th>
				</tr>
			</thead>
			<template>
			<tbody>
				<tr v-for="(r, index) in deviceList">
					<td>{{ (page.current-1) * page.size + index + 1 }}</td>
					<td>{{ r.id }}</td>
					<td>{{ r.name }}</td>
					<td>{{ r.major }}</td>
					<td>{{ r.email }}</td>
					<td>{{ r.phone }}</td>
					<td>{{ r.root }}</td>
					<td>{{ r.roleId }}</td>
					<td>{{ statusText[r.status] }}</td>
					<td><a @click.prevent="update(r.id);" class="btn layui-btn layui-btn-normal"><i
							class="layui-icon">&#xe642;</i>编辑</a>
						
						<a v-if="r.blackList != 1" @click.prevent="editToBlacklist(index, 1);" class="btn layui-btn layui-btn-danger"><i
							class="glyphicon glyphicon-exclamation-sign"></i>黑名单</a>
						
						<a v-else @click.prevent="editToBlacklist(index, 0);" class="btn layui-btn layui-btn-green"><i
							class="glyphicon glyphicon-exclamation-sign"></i>移出黑名单</a>
						
						<a v-if="r.status != 4" @click.prevent="removeModel(r.id);" class="btn layui-btn layui-btn-danger"><i
							class="glyphicon glyphicon-remove"></i>删除</a>
					</td>
					<td><img src="" :src="r.image" style="height:43px;"></td>
				</tr>
			</tbody>
			</template>
		</table>
		<div v-if="page.loading">数据加载中...</div>
	</div>
	<div id="pages" class="text-right"></div>	
</div>

<!--  用户新增和编辑表单，弹出层div-->
<div id="addFormDiv" class="hide" style="padding:20px 30px;">
		<form class="form-horizontal" action="" id="addForm">
			<div class="layui-form-item">
				<label class="layui-form-label">账号<span class="error">*</span></label>
				<div class="layui-input-block">
					<template v-if="userForm.id">{{ userForm.id }}</template>
					<input v-else type="text" name="id" required v-model="userForm.id"
						 autocomplete="off" class="form-control">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码<span class="error">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="password" required v-model="userForm.password"
						 autocomplete="off" class="form-control">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名<span class="error">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="name" required v-model="userForm.name"
						 autocomplete="off" class="form-control">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">专业<span class="error">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="major" required v-model="userForm.major"
						 autocomplete="off" class="form-control">
				</div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">手机号</label>
			    <div class="col-sm-9">
					<div class="input-group">
				      <div class="input-group-addon">+86</div>
				      <input type="text" name="phone" required class="form-control" v-model="userForm.phone">
				    </div>
				</div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱<span class="error">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="email" required v-model="userForm.email"
						 autocomplete="off" class="form-control">
				</div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">角色<span class="error">*</span></label>
				<div class="layui-input-block">
					<select class="form-control" name="root" required style="width:200px;" v-model="userForm.root" placeholder="请选择">
						<option value="" disabled selected>请选择— —</option>
						<option v-for="(r, index) in dependencyList.rootList" :value="r.id">{{r.name}}</option>
		            </select> 
	            </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">用户组<span class="error">*</span></label>
				<div class="col-sm-10">
					<select class="form-control" name="roleId" required style="width:200px;" v-model="userForm.roleId" placeholder="请选择">
						<option value="" disabled selected>请选择— —</option>
						<option v-for="(r, index) in dependencyList.userRoleList" :value="r.id">{{r.name}}</option>
		            </select> 
	            </div>
			</div>
			
			<div class="form-group">
				<label for="exampleInputEmail2" class="col-sm-1 control-label"></label>
				<div class="col-sm-9">
					<input type="submit" class="btn btn-success" value="立即提交">
					<button type="reset" class="btn btn-default">重置</button>
				</div>
			</div>
		</form>
		
</div>
</div>


</div>
</div>
<!-- 在这里引入本页面需要的js -->
<script src="assets/js/vue.min.js" type="text/javascript"></script>
<script src="assets/js/axios.min.js" type="text/javascript"></script>
<script>
var vm = new Vue({
	el: '#mainVueApp',
	data: {
		page: {
			current: 1,
			size: 10,
			total: 0,
			loading: true
		},
		userForm: {
			name: '',
			model: '',
			roleids: [],
			typeId: 0,
		},
		statusText: [
			"待审核",
			 "正常登录",
			 "禁止登录 ", 
			 "审核不通过",
			 "已删除"
		],
		saveId: 0,
		imageRemoveBtn: false,
		deviceList: [],
		dataContent: {
			threedFiles: [],
			images: [],
			imageRemoveIds: [],
			threedFileRemoveIds: [],
			imageAddIds: [],
			threedFileAddIds: []
		},
		dependencyList: {
	        // 依赖列表，主要是下拉框相关
	        rootList: [],
	        userRoleList: []
	    },
	},
	mounted: function() {
		// 部门列表
		axios.get("ac/role").then(function(res) {
			vm.dependencyList.rootList = res.data.content
		}).catch(function(error) {
			console.log(error)
		})
		// 用户组
		axios.get("ac/userRole").then(function(res) {
			vm.dependencyList.userRoleList = res.data.content
		}).catch(function(error) {
			console.log(error)
		})
	},
	methods: {
		removeModel: function(id) {
			var $list = this.deviceList; // 当前行数据对象
			layer.confirm('确定要删除当前用户吗？', {
				title:false,
				skin:'layer-class',
				closeBtn: 0,
				btn: ['确定','取消'] //按钮
			}, function(){
				axios.delete("ac/userManage/" + id).then(function(res) {
					if (res.data.code == 0) {
						$list.splice(index, 1);
						layer.msg("删除成功");
						search(cc);
					}else{
						layer.msg("删除失败！");
					} 
				})
			}, function(){
			});
		},
		update: function(id) {
			this.saveId = id;
			var $this = this;
			var tit = "新增用户信息";
			if(id != 0){ // 那么是编辑修改信息，需要获取用户文件列表
				$.get("ac/userManage/" + id, function(data){
					if(data.code==0){
						/* data.content.roleids = data.content.roleids.split(',') */
						$this.userForm = data.content
					} else{
						layer.msg("获取信息失败！");
						return false;
					}
				})
				tit = "修改用户信息";
			}else{
				this.userForm = {roleids: []}
			}
		 	$("#addFormDiv").removeClass("hide");
			index=layer.open({
				type : 1,
				area: ['700px','766px'],
				title : tit,
				content : $("#addFormDiv"),
				cancel: function(index, layero) {
					validator.resetForm();//// 重置表单验证提示
					$("#addFormDiv").addClass("hide");
					layer.close(index);
				} 
			})
		},
		onSubmit: function() {
			var saveId = this.saveId
			if (saveId == 0) {
				var userForm = this.userForm;
				axios.post("ac/userManage", userForm).then( function(res) {
					if (res.data.code == 0) {
						layer.msg("增加成功");
						search(cc);
						layer.close(index);
						$("#addFormDiv").addClass("hide");
					} else if (res.data.code == 500){
						layer.msg("账号不能重复");
					} else {
						layer.msg("增加失败");
					}
				})
			} else { // 否则是更新，那么分别取增加和减少的用户文件id、增加和减少的图片id
				var userForm = this.userForm;
				axios.put("ac/userManage", userForm).then( function(res) {
					if (res.data.code == 0) {
						layer.msg("修改成功");
						search(cc);
						layer.close(index);
						$("#addFormDiv").addClass("hide");
					} else {
						layer.msg("增加失败");
					}
				})
			}
		},
		threedPreview: function(id) {
			layer.open({
				type: 2,
				title: "3D用户预览",
				area: ['80%', '80%'],
				content: 'admin/manage/72?id=' + id
			})
		},
		removeImg: function(index) {
			this.dataContent.imageRemoveIds.push(this.dataContent.images[index].id);
			this.dataContent.images.splice(index, 1);
			layer.msg("点击提交后生效");
		},
		// 加入黑名单
		editToBlacklist: function(index, blackStatus) {
			var $this = this;
			var params = new URLSearchParams();
			params.append("blackList", blackStatus);
			axios.put("ac/userManage/blackList/" + this.deviceList[index].id, params).then(function(res) {
				if (res.data.code == 0) {					
					$this.deviceList[index].blackList = blackStatus;
				} else {
					layer.msg("res.data.content")
				}
			})
		},
		// 切换顶部状态
		switchBlackStatus: function(status) {
			$("#blackStatus").val(status);
			pageChange(1)
		}
	}
})
</script>
<script>
var cc=1;
function pageChange(curr) {
	$.get("ac/userManage/userList?current="+curr, $("#search_submit").serialize(), function(data) {
		vm.deviceList = data.content.records;
		vm.page.loading = false;
		$("#deviceList").removeClass("hide");
		layui.laypage.render({
		    elem: 'pages', //容器。值支持id名、原生dom对象，jquery对象,
		    pages: data.content.pages, //总页数
		    count: data.content.total,
		    layout: ['count', 'prev', 'page', 'next', 'skip'],
		    theme: '#4599e0',
		    curr: data.content.current,
		    groups: 3, //连续显示分页数
		    jump: function(obj, first) {
		    	if(!first){ //一定要加此判断，否则初始时会无限刷新
		    		cc=obj.curr;
		    		pageChange(obj.curr);
		    	}
		    }
		});
		vm.page.current = data.content.current;
		vm.page.total = data.content.total;
	});
}
pageChange(1);

function search(curr){
	if(curr != 1){
		curr=cc;
	}
	pageChange(curr);
}
var index;
// 表单校验
var validator;
$().ready(function() {
	 validator = $("#addForm").validate({
		errorPlacement: function(error, element) {
			// Append error within linked label
			$( element ).parent().parent().append( error );
		},
	 	submitHandler: function(form){
        	vm.onSubmit();
        }    
	});
    $("#reset").click(function() {
        validator.resetForm();
    });
});

function clickDelete(obj) {
	// 给删除按钮注册事件
	// 获取当前记录的信息写入
	if(confirm("确定要删除该用户吗？")){
		var recordId = obj.attr("recordId");
		axios.delete("items/device/" + recordId).then(function(res) {
			if (res.data.code == 0) {
				obj.closest("tr").remove();
				layer.msg("删除成功！");
			}else{
				layer.msg("删除失败！");
				return false;
			} 
		})
	}
}
</script>
<script type="text/javascript">
</script>
<script>//上传用户
$('#uploadThreed').fileupload({
	url: 'fileUpload/uploadStl',
	dataType: 'json',
	add: function (e, data) {//将要上传的文件名显示在一个元素节点上：你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
	    	var select = $("#type").val();//获取选择框数据
	    	var uploadErrors = [];//创建一个包含错误类型的数组acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
	 		var acceptFileTypes = /^application\/(netfabb)$/i;//设置上传文件的类型application/netfabb
	 		var acceptFileSize = 50*1024*1024;//50M;
	 		//alert(data.originalFiles[0]['type']);
	 		
	 		if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
	 			layer.msg('文件类型不正确！');
	  		 	return false;
	  		} 
	 		if(data.originalFiles[0]['size'] > acceptFileSize) {
	  		   layer.msg('文件太大了！最大50M');
	  		   return false;
	  		}
	 		 
	 		//**************************自动上传**************************
 	 		$('.up_progress1 .progress-bar1').css('width','0px');//给进度条添加样式
		    $('.up_progress1').show();//显示进度条
		    $('.up_progress1 .progress-bar1').html('Uploading...');//显示进度条文字
		    data.submit(); 
		    //**************************自动上传**************************
	},
	done: function(e, data) {
		$('.up_progress1').hide();
		var resultJson = data.result;
		if (typeof resultJson) {
			// alert(JSON.stringify(vm.dataContent));
			vm.dataContent.threedFiles.push(resultJson.content);
			vm.dataContent.threedFileAddIds.push(resultJson.content.id);
		}
	},
    progressall: function (e, data) {//所有文件的总体上传进度(progressall)显示
    	console.log(data);
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.up_progress1 .progress-bar1').css('width',progress + '%');
    }
});
/* 图片上传*********************************************************** */
$("#imageupload").fileupload({
	dataType: 'json',
	maxFileSize : 5000000000, // 5 G，文件大小,这里没有用，在acceptFileSize限制文件大小
    add: function (e, data) {//将要上传的文件名显示在一个元素节点上：你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
    	
    	var select = $("#type").val();//获取选择框数据
    	var uploadErrors = [];//创建一个包含错误类型的数组
 		var acceptFileTypes;//设置上传文件的类型
 		var acceptFileSize;
 		select = 2;
 		if (select==2) {
 			acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
 			acceptFileSize = 2*1024*1024;//2M
		}
 		//alert(1);
 		//console.log(data);
 		if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
 		   uploadErrors.push('文件类型不正确！');
 		  }
 		if(data.originalFiles[0]['size'] > acceptFileSize) {
 		   uploadErrors.push('文件太大了！');
 		  }
 		/* ----------------------------------------------------------------------------------------------------- */
   	 var files=data.files;
           for (var i = 0; i < files.length; i++) {
        	   var numItems1 = $('.files .images_zone').length;//获取图片容器内的图片数量
        	   if(((files.length) + numItems1) > 10){
        		   alert('只能上传10张');
		    		return false;
        	   }
               var file = files[i];
               var reader = new FileReader();
               var ret = [];
               reader.onload = function(theFile) {
                   var image = new Image();
                   image.onload = function() {
                       width_fileInputId=this.width;
                       height_fileInputId=this.height;
                    	   if(uploadErrors.length > 0) {
                     		   alert(uploadErrors.join("\n"));
                     		   return false;
                     		  }else {
                     			 var numItems = $('.files .images_zone').length;//获取图片容器内的图片数量
                     			 if (select==2) {
                     		    	if(numItems>8){
                     		    		alert('每次只能上传10张');
                     		    		return false;
                     		    	}
                     			}
                     	 		//**************************自动上传**************************
                     	 		$('.up_progress .progress-bar').css('width','0px');//给进度条添加样式
                    		    $('.up_progress').show();//显示进度条
                    		    $('.up_progress .progress-bar').html('Uploading...');//显示进度条文字
                    		    data.submit(); 
                    		    //**************************自动上传**************************
                    		   
                    		}
                   };
                   image.src = theFile.target.result;
               }
               reader.readAsDataURL(file);
           }
   	/* ------------------------------------------------------------------------------------------------- */
 		
    },
    done: function (e, data) {//完成之后的回调函数
    	var d = data.result;//获取的数据必须转为data.result才可以使用！！！
    	$('.up_progress').hide();
    	$('.upl').remove();
        //var d = data.result;
       	vm.dataContent.images.push(d.content);
       	vm.dataContent.imageAddIds.push(d.content.id);
    },
    progressall: function (e, data) {//所有文件的总体上传进度(progressall)显示
    	console.log(data);
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.up_progress .progress-bar').css('width',progress + '%');
    }
});
</script>